<template>
  <div class="webPlugIn" v-loading="loading">
    <div style="display: flex; padding: 10px" class="w-full">
      <el-card style="width: 200px">
        <el-button type="primary" icon="Plus" @click="addRole" text style="padding-left: 60px"
          >添加接入网站</el-button
        >

        <el-menu
          style="max-height: 555px; overflow-y: auto"
          class="el-menu-vertical-demo"
          @select="handleGroupSelect"
          v-if="activeName == '0'"
        >
          <el-menu-item
            :index="index"
            v-for="(item, index) in groupList"
            :key="index"
            style="display: inline-flex; justify-content: space-between; width: 100%"
            :class="activeIndex == index ? 'item active-item' : 'item'"
          >
            <span>{{ item.name }}</span>

            <el-popover
              placement="bottom"
              trigger="hover"
              popper-style="display: inline-flex"
              v-if="index !== 0"
            >
              <template #reference>
                <svg-icon iconClass="icon_more" />
              </template>
              <el-button type="primary" text @click="handleGroupEdit(item)">编辑</el-button>
              <el-button type="primary" text @click="handleGroupDele(item)">删除</el-button>
            </el-popover>
          </el-menu-item>
        </el-menu>
      </el-card>

      <div style="width: calc(100% - 210px); margin-left: 10px">
        <el-card>
          <div style="display: flex; flex-direction: column; padding: 10px" class="w-full">
            <div class="title">插件代码</div>
            <div class="tips">
              复制本段代码，粘贴到您网页代码标签的前面。设置完成后，插件的按钮将会展示在网页右下角
            </div>
            <el-form>
              <el-form-item label="语言">
                <el-select v-model="language" style="width: 100%" placeholder="请选择" clearable>
                  <el-option
                    v-for="item in languageOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>

            <div>
              <el-button type="primary" @click="handleCopy">复制链接</el-button>
            </div>
            <div style="border: 1px solid gray" class="wangeditor w-full">
              <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editorRef"
                :defaultConfig="toolbarConfig"
                mode="simple"
              />
              <Editor
                class="editor-content"
                style="height: 300px; overflow-y: hidden"
                v-model="message"
                :defaultConfig="editorConfig"
                mode="simple"
                @onCreated="handleCreated"
              />
            </div>
          </div>
        </el-card>

        <el-card>
          <div class="title">自动切换语言</div>
          <div class="tips">顾客在聊天窗口，可以选择适合自己的窗口语言</div>
          <div>功能启用： <el-switch v-model="showManual" @change="handleChanegSwitch" /></div>
        </el-card>
      </div>
    </div>

    <!-- 弹窗 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500">
      <el-form>
        <el-form-item label="">
          <el-input type="text" placeholder="请输入" v-model="detail"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {
  onActivated,
  onDeactivated,
  onMounted,
  onUnmounted,
  ref,
  watchEffect,
  shallowRef,
  getCurrentInstance,
  onBeforeUnmount,
} from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { successMessage, warnMessage, errorMessage } from "@/utils/message";
import "@wangeditor/editor/dist/css/style.css";

const loading = ref(false);
const dialogVisible = ref(false);
const dialogTitle = ref("");
const message = ref("");
const detail = ref("");
const groupList = ref([]);
const languageOptions = ref([]);
const language = ref("");
const showManual = ref(false);
const editorRef = shallowRef();

const toolbarConfig = {
  toolbarKeys: [
    "clearStyle",
    "divider",
    "emotion",
    "blockquote",
    "|",
    // 菜单组，包含多个菜单
    {
      key: "group-link",
      title: "链接",
      menuKeys: ["insertLink", "editLink", "unLink", "viewLink"],
    },

    "redo",
    "undo",
  ],
};
const editorConfig = {
  placeholder: "请输入内容...",
  EXTEND_CONF: {
    mentionConfig: {
      pinyinSearch: true,
    },
  },
};

const handleChanegSwitch = () => {};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const addRole = () => {};
const handleGroupSelect = () => {};
const handleGroupEdit = (item) => {};
const handleGroupDele = () => {};
const handleSubmit = () => {};
const handleCopy = () => {};
</script>
<style type="scss" scoped>
.webPlugIn {
  display: flex;
  height: 100%;
  padding: 10px;
  flex-direction: column;
  overflow-y: auto;
}
.title {
  font-size: 16px;
  font-weight: bold;
  color: var(--color-text);
}

.tips {
  font-size: 14px;
  padding: 20px 0;
  color: gray;
}

.active-item {
  color: var(--el-menu-active-color);
}
</style>
